<template>
	<!-- <ui-container> -->
	<view class="my_wrapper">
		<!-- <uni-nav-bar left-icon="back" :title="title" color="#fff" statusBar="true"
		:fixed="true" backgroundColor="rgba(0, 0, 0, 1)" @clickLeft="toNext"></uni-nav-bar> -->
		<view class="wrapper">
			<view class="item_search">
				<uni-search-bar :radius="10" v-model="searchVal" :disabled="false" clearButton="always"
					placeholder="请输入项目名称" @blurs="searchInput" />
				<filterModel :disabled="disabledFilter" v-if="showFilter" :all="allFilter" :userIds="userIds" :csd="csd"
					@filterd="filterd"></filterModel>
			</view>
		</view>
		<!-- <view style="height: 150rpx;"></view> -->

		<view class="item_content">
			<scroll-view @scrolltolower="scrolltolower" :style="{ height: pageHight - 90 + 'px' }" :scroll-y="true"
				scroll-with-animation v-if="gardenArr.length" @scroll="scroll" :scroll-top="scrollGoTop">
				<view class="content_L">
					<!-- 统计数据暂时隐藏1 -->
					<view class="item_top">
						<!-- <text>
							共{{ eleTotalObj.buildingTotal || '0' }}个项目{{ eleTotalObj.eleTotal || '0' }}台梯 | 专项
							<text style="color:#0091ff">{{ eleTotalObj.notDistributionCount || '0' }}台</text>
							未分配，已完成
							<text style="color:#0091ff">{{ eleTotalObj.finnishCount || '0' }}台</text>
						</text> -->
						<view>共<text>{{ eleTotalObj.buildingTotal || 0 }}</text>个项目<text>{{
							eleTotalObj.eleTotal ||
								'0'
						}}</text>台梯</view>
					</view>

					<uni-collapse ref="collapse" accordion @change="changeCollapse">
						<uni-collapse-item :showArrow="false" 
						class="collapseItem" titleBorder="none"
							:showMyElevator="true" :border="false" v-for="(item, i) in gardenArr"
							:key="item.buildingId">
							<template v-slot:title>
								<view class="L_text" @click="selectGarden(item, i)">
									<view class="container_left">
										<view class="L_one">
											{{ item.buildingName }}
										</view>
										<text class="L_two">{{ item.address }}</text>
										<view class="L_tree" @click.stop="toProject(item.buildingId)">

											<view class="projectMsg">
												项目信息
												<uni-icons color="#0091ff" size="14" type="arrowright" />
											</view>
										</view>
									</view>
									<view class="container_right">
										<view class="trrow">
											<view
												:style="item.isOpens ? 'transform:rotate(135deg);transition: 0.3s all;' : 'transition: 0.3s all;transform:rotate(-45deg)'">
											</view>
										</view>
									</view>
								</view>
								<!-- <view class="L_text" @click="selectGarden(item, i)">
									<view class="L_one">
										{{ item.buildingName }}
									</view>
									<text class="L_two">{{ item.address }}</text>
									<view class="L_tree">
										
										<view class="projectMsg" @click.stop="toProject(item.buildingId)">
											项目信息
											<uni-icons color="#0091ff" size="14" type="arrowright" />
										</view>
									</view>
									<view class="trrow">
									<view :style="item.isOpens ? 'transform:rotate(135deg);transition: 0.3s all;' : 'transition: 0.3s all;transform:rotate(-45deg)'"></view>
									</view>
								</view> -->
							</template>
							<view class="lines"></view>
							<view class="content">
								<view class="cont_L">
									<view :class="item.status ? 'contElevar actElevar' : 'contElevar'"
										@click="toMiantain(item)" v-for="(item) in elevatorList"
										:key="item.elevatorId">
										<view class="timeless">
											<text>{{ item.elevatorAddress || '--' }}</text>
											<!-- <text class="light" v-if="item.zsStatus != 0" :style="item.zsStatus == 2 ? 'color: #cccccc;border: 2rpx solid #cccccc;' : ''">专项</text> -->
											<text v-if="item.contractStatus == 3 && findRoute('mystatistics_contract')"
												class="redTag">即将到期</text>
											<text v-if="item.contractStatus == 1 && findRoute('mystatistics_contract')"
												class="redTag">到期未签</text>
										</view>

										<view class="info">
											{{ item.useType == 0 ? '年审梯' : '非年审梯' }}
											<text>|</text>
											{{ item.brandName || '未设置品牌' }}
											<text>|</text>
											{{ getYear(item.madeDate) }}年
										</view>
									</view>
									<!-- <view v-else style="color: #999999;text-align:center;margin-top: 100rpx;">暂无数据~</view> -->
									<uni-load-more v-if="eleShow" :status="eleState"
										:contentText="contentText"></uni-load-more>
								</view>
								<view class="cont_R">
									<block v-if="showInfo">
										<view class="R_info" @click="goElevator('info')">
											电梯信息
											<image src="/static/images/tipsx.png" mode=""></image>
										</view>
										<view class="R_his" @click="goElevator('history')">
											<view class="">任务列表</view>
											<view class="">
												<text>(已完成{{ elevatorList[indexs].historyTotal }}项)</text>
											</view>
										</view>
									</block>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>

					<uni-load-more :status="state" :contentText="contentText"></uni-load-more>
					<!-- <view v-if="gardenArr.length === 0" style="background:#f8f8f8; margin-top:100rpx;text-align: center;color: #999999;">
					暂无数据
				</view> -->
				</view>
			</scroll-view>
			<!-- <view class="content_R" :style="{height:pageHight-40+'px'}">
				<view class="R_text" @click="toMiantain(item)" v-for="(item,i) in elevatorList" :key="i">
					<text>{{item.elevatorAddress || '--'}}</text>
					<text v-if="item.zsStatus != 0" :style="item.zsStatus == 2?'color: #cccccc;border: 2rpx solid #cccccc;':''">报闸专项</text>
					<view class="lines"></view>
				</view>
				<view style="margin-top: 100rpx;text-align: center;color: #999999;" v-if="elevatorList.length <= 0">
					暂无数据
				</view>
			</view> -->
			<!-- 空列表 -->
			<view class="empty" v-else>
				<view class="circle">
					<image src="/static/images/emptyS.png" mode=""></image>
				</view>

				<view class="title">
					暂无搜索结果
				</view>
				<view class="tips">
					可以更换搜索条件试试
				</view>
			</view>
		</view>
		<view-top ref="viewTop" :scrollTop="scrollTop" :distance="100" @goTop="goTop"></view-top>
	</view>
	<!-- </ui-container> -->
</template>

<script>
// import collapse from "@/components/uni-collapse/uni-collapse.vue"
// import collapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue"
import {  getElevatorList, getElevatorListChild,  myElevatorStatistics } from '@/apis/barrierSearch.js';
import filterModel from './components/filter-model.vue';
// import unisearchbar from '@/components/uni-search-bar/uni-search-bar.vue';
import { mapState } from 'vuex';
import { getDiffYear } from '@/utils/tools.js';
// import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import { removeEmpty } from '@/utils/utils.js';
// import uiContainer from '@/components/ui-container/ui-container.vue';
import viewTop from '@/components/viewTop/viewTop.vue';
export default {
	data() {
		return {
			// 返回顶部
			scrollGoTop: 0, 
			// 滚动距离
			scrollTop: 0, 
			showFilter: false,
			allFilter: true,
			disabledFilter: false,
			// 筛选
			csd: {},
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			showData: false,
			pageHight: uni.getSystemInfoSync().windowHeight,
			gardenArr: [],
			elevatorList: [],
			nums: 0,
			count: 0,
			tcount: 0,
			showInfo: false,
			showState: false,
			currObj: {},
			listObj: {},
			indexs: 0,
			state: '',
			eleState: '',
			// 显示电梯列表更多状态
			eleShow: true, 
			totalPage: 0,
			obj: {
				current: 1,
				size: 20
			},
			searchVal: '',
			groupLeader: null,
			// 电梯统计数据
			eleTotalObj: {},
			title: '我的电梯',
			userIds: '',
			tempList: ['buildingId', 'buildingName', 'current', 'size', 'allChecked']
		};
	},
	components: {
		filterModel,
		// unisearchbar,
		// uniNavBar,
		// uiContainer,
		viewTop
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	onLoad(os) {
		if (os.data) {
			const data = JSON.parse(os.data);
			// const value = data.value;
			this.obj[data.key] = data.value.join(',');
			this.allFilter = false;
			// this.csd[`${data.key}`]=[Number(`${data.value}`)]
			this.csd[`${data.key}`] = data.value;
			// if(data.title){
			// 	this.title=data.title+'维保电梯'
			// }else{
			// 	this.title="我的电梯"
			// }
		}
		uni.getStorage({
			key: 'statistical',
			success: (res) => { 
				const { id, title } = res.data;
				this.userIds = id;
				if (title) {
					this.title = title + '维保电梯';
					uni.setNavigationBarTitle({
						title: this.title
					});
				}
				this.initElevatorGroup();
				setTimeout(() => {
					this.initStatistics();
				}, 500);
			}
		});
		this.showFilter = true;
	},
	onShow() { },
	mounted() {},

	methods: {
		goTop() {
			this.scrollGoTop = 1;
			this.$nextTick(() => {
				this.scrollGoTop = 0;
			});
		},
		scroll(e) {
			this.scrollTop = e.target.scrollTop;
		},
		// 项目统计
		initStatistics() {
			// eslint-disable-next-line no-unused-vars
			const { size, current, ...params } = this.obj;
			let query = {};
			if (!params.allChecked) {
				query = { ...params };
			}
			let tempParams = { ...query, userIds: this.userIds };
			for (let key in tempParams) { 
				if (!this.tempList.includes(key)) {
					// console.log(tempParams[key])
					tempParams[key] = tempParams[key].split(',');
				}
			} 
			// return
			myElevatorStatistics(removeEmpty(tempParams)).then(res => {
				if (res.code === 200) {
					// console.log(res.data,'顶部统计')
					this.eleTotalObj = res.data || {};
				}
			});
		},
		getYear(d) {
			return d ? getDiffYear(d) : '-';
		},
		// 筛选器
		filterd(res) { 
			this.gardenArr = [];
			this.obj.current = 1;
			this.totalPage = 0;
			this.state = '';
			if (res.allChecked) {
				this.obj.allChecked = true;
				if (this.obj.types != undefined) {
					delete this.obj.types;
				}
				if (this.obj.useTypes != undefined) {
					delete this.obj.useTypes;
				}
				if (this.obj.brandIds != undefined) {
					delete this.obj.brandIds;
				}
				if (this.obj.contractStatus != undefined) {
					delete this.obj.contractStatus;
				}
				this.initElevatorGroup();
				this.initStatistics();
				return;
			}
			this.obj.allChecked = false;
			if (res.choosed.types) {
				this.obj.types = res.choosed.types.join(',');
			}
			if (res.choosed.useTypes) {
				this.obj.useTypes = res.choosed.useTypes.join(',');
			}
			if (res.choosed.brandIds) {
				this.obj.brandIds = res.choosed.brandIds.join(',');
			}
			if (res.choosed.contractStatus) {
				this.obj.contractStatus = res.choosed.contractStatus.join(',');
			} 
			this.initElevatorGroup();
			this.initStatistics();
		},

		// 维保过的小区
		initElevatorGroup(leader, type) {
			uni.showLoading({
				title: '数据加载中',
				icon: 'none'
			});
			var handChange;
			// this.obj.userId = this.userinfo.user_id;
			// const tempList=["buildingId","buildingName","current","size"]
			let params = { ...this.obj, userIds: this.userIds };

			for (let key in params) {
				if (!this.tempList.includes(key)) {
					params[key] = params[key].split(',');
				}
			}
			handChange = getElevatorList(removeEmpty(params));
			// console.log(this.obj,'this.obj')
			// if (leader === 1) {
			// 	this.obj.groupId = this.userinfo.maintainGroupId;
			// 	handChange = getElevatorGroup(this.obj);
			// } else {
			// 	this.obj.userId = this.userinfo.user_id;
			// 	handChange = getElevatorList(this.obj);
			// }
			// uni.showLoading({
			// 	 title: '加载中...'
			// })
			this.state = 'loading';
			handChange.then(res => {
				if (res.code === 200) {
					uni.hideLoading();
					let data = res.data.records || [];
					this.totalPage = res.data.pages;
					if (data.length > 0) {
						this.state = 'noMore';
						// let have = 0,no = 0,count = 0,tcount = 0
						// let contsa = 0
						// for(let i = 0; i < data.length; i++){
						// 	data[i].state = false
						// 	let childs = data[i].child
						// 	if(data[i].child.length > 0){
						// 		have += data[i].child.length
						// 	}
						// 	for(let j = 0; j < childs.length; j++){
						// 		if(!data[i].child[j].elevatorId){
						// 			no += 1
						// 		}
						// 		if(childs[j].zsStatus === 0){
						// 			count += 1
						// 		}
						// 		if(childs[j].zsStatus === 2){
						// 			tcount += 1
						// 		}
						// 	}
						// }

						// this.nums = have - no
						// this.count = count - no
						// this.tcount = tcount
						let newGardenArr = this.gardenArr;
						this.gardenArr = newGardenArr.concat(data);
					} else {
						this.state = 'noMore';
					}
					if (type === 'act') {
						this.gardenArr = data;
					}
					// console.log('this.gardenArr', this.gardenArr);
				}
			});
		},

		scrolltolower() {
			// console.log('aaaaaaaaaaaaaa');
			this.showData = true;
			if (this.obj.current < this.totalPage) {
				this.obj.current += 1;
				this.initElevatorGroup(this.groupLeader);
			} else {
				this.state = 'noMore';
			}
		},
		// 搜索
		searchInput(val) {
			this.showData = false;
			this.obj.current = 1;
			if (val) {
				this.obj.buildingName = val;
			} else {
				this.obj.buildingName = '';
			}
			this.initElevatorGroup(this.groupLeader, 'act');
			this.initStatistics();
		},
		changeCollapse(index) {
			// console.log('点击了')
			let inde = Number(index);
			if (index === '') {
				inde = -1;
			}
			for (let i = 0; i < this.gardenArr.length - 1; i++) {
				if (i === inde) {
					this.gardenArr[i].isOpens = true;
				} else {
					this.gardenArr[i].isOpens = false;
				}
			}
			this.$forceUpdate();
		},
		selectGarden(obj) {
			// console.log('点击电梯')
			this.showInfo = false;
			this.showState = false;
			let result;
			this.eleState = 'loading';
			const params = { buildingId: obj.buildingId, userIds: this.userIds.split(','), size: 200, current: 1 };
			result = getElevatorListChild(removeEmpty(params));
			// if (this.groupLeader == 1) {
			// 	result = getElevatorListGroup({ buildingId: obj.buildingId });
			// } else {
			// 	result = getElevatorListChild({ buildingId: obj.buildingId });
			// }
			result.then(res => {
				if (res.code === 200) {
					this.elevatorList = res.data || [];
					if (this.elevatorList.length > 0) {
						this.eleShow = false;
					} else {
						this.eleState = 'noMore';
						this.eleShow = true;
					}

					this.listObj = obj;
				}
			});
			// return
			// let gardenArrs = this.gardenArr
			// for(let i = 0; i < gardenArrs.length; i++){
			// 	if(obj.buildingId === gardenArrs[i].buildingId){
			// 		this.elevatorList = gardenArrs[i].child
			// 		this.listObj = obj
			// 		gardenArrs[i].state = true
			// 	}else{
			// 		gardenArrs[i].state = false
			// 	}
			// }
		},
		toMiantain(obj) { 
			let list = this.elevatorList;
			for (let i = 0; i < list.length; i++) {
				if (obj.elevatorId === list[i].elevatorId) {
					list[i].status = true;
					this.showInfo = true;
					this.currObj = obj;
					this.indexs = i;
					if (obj.zsStatus != 0) {
						this.showState = true;
					} else {
						this.showState = false;
					}
				} else {
					list[i].status = false;
				}
			}
			this.elevatorList = list;
			this.$forceUpdate();
		},
		goElevator(type) {
			// console.log('点击跳转',type)
			let str = '';
			if (type === 'info') {
				str = '/subpages/elevator/projectInfo/elevatorInfoPage?id=' + this.currObj.elevatorId;
			}
			if (type === 'history') {
				// let data = {
				// 	name: this.listObj.buildingName,
				// 	buildingId: this.listObj.buildingId,
				// 	address: this.currObj.elevatorAddress,
				// 	elevatorId: this.currObj.elevatorId,
				// 	planId: this.currObj.planId
				// };
				str = '/subpages/elevator/projectInfo/eleDetail?id=' + this.currObj.elevatorId;
			}

			uni.navigateTo({
				url: str,
				fail(err) {
					console.log(err);
				}
			});
		},
		toProject(id) { 
			uni.navigateTo({
				url: `/pageModules/projectInfo/index?id=${id}&type=0`
			});
		},
		toNext() {
			uni.navigateBack({

			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}

.my_wrapper {
	// height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;

	.wrapper {
		position: sticky;
		z-index: 300;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.item_top {
		margin: 20rpx 40rpx 0 0rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;

		text {
			color: #0091ff;
		}
	}
	.item_content {
		display: flex;
		flex-direction: row;

		.content_L {
			overflow-y: auto;
			// background-color: #FFFFFF;
			// flex: 0 0 420rpx;
			width: 710rpx;
			margin: 0 auto;
			border-radius: 8rpx;

			.L_text {
				padding: 20rpx 20rpx 0 20rpx;
				background-color: #ffffff;
				// position: relative;
				display: flex;
				justify-content: space-between;

				.container_left {
					width: 600rpx;
				}

				.container_right {
					display: flex;
					flex: 1;
					// background-color: pink;

					.trrow {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						// position: absolute;
						// top: 40%;
						// right: 30rpx;
						// width: 300rpx;
						// display: flex;
						// justify-content: flex-end;
						// // background: pink;
						// height: 60rpx;

						view {
							width: 18rpx;
							height: 18rpx;
							border-left: 2rpx #999999 solid;
							border-bottom: 2rpx #999999 solid;
							transform: rotate(-45deg);
							margin-top: 40rpx;
						}
					}

				}

				.L_one {
					display: block;
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					width: 600rpx;
				}

				.L_two {
					display: block;
					font-size: 24rpx;
					color: #999999;
					margin: 5rpx 0 5rpx 0;
					width: 600rpx;
				}

				.L_tree {
					padding-bottom: 24rpx;
					// width: 600rpx;
					display: flex;
					font-size: 24rpx;
					width: 250rpx;

					// align-items: center;
					.tips_item {
						// padding-bottom: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
					}

					.projectMsg {
						color: #0091ff;
						// padding: 10rpx 0;
						display: flex;
						font-size: 24rpx;
						flex: 1;
						// padding-left: 18rpx;
					}
				}

				// .trrow {
				// 	position: absolute;
				// 	    top: 40%;
				// 	    right: 30rpx;
				// 	    width: 300rpx;
				// 	    display: flex;
				// 	    justify-content: flex-end;
				// 	    // background: pink;
				// 	    height: 60rpx;

				// 	view{
				// 		width: 18rpx;
				// 		height: 18rpx;
				// 		border-left: 2rpx #999999 solid;
				// 		border-bottom: 2rpx #999999 solid;
				// 		transform: rotate(-45deg);
				// 	}
				// }
			}

			.lines {
				width: 660rpx;
				margin: 0 auto;
				border-bottom: 2rpx solid #eeeeee;
			}

			.content {
				display: flex;
				flex-direction: row;
				height: 300rpx;
				// min-height: 200rpx;
				padding-bottom: 30rpx;

				// background-color: pink;
				.cont_L {
					display: flex;
					width: 70%;
					flex-direction: column;
					overflow-y: auto;
					.timeless{
						margin-bottom: 12rpx;
					}
					.redTag {
						font-size: 24rpx;
						font-weight: normal;
						background: #fde6e6;
						color: #e02020;
						border: 2rpx solid #fc9e9e;
						border-radius: 4rpx;
						padding: 0 10rpx 1rpx 10rpx;
						margin-left: 12rpx;
						white-space: nowrap;
					}

					.contElevar {
						padding: 20rpx 20rpx 20rpx 30rpx;
						font-size: 24rpx;

						.light {
							margin-left: 10rpx;
							display: inline-block;
							border: 2rpx solid #89ccff;
							border-radius: 6rpx;
							font-size: 24rpx;
							font-weight: 400;
							text-align: left;
							color: #0091ff;
							padding: 0rpx 5rpx;
						}

						.info {
							color: #666666;

							text {
								color: #cccccc;
								margin: 0rpx 10rpx;
							}
						}
					}

					.actElevar {
						background-color: #f8f8f8;
						border: 4rpx solid;
						border-left-color: #0091ff;
						border-top-color: transparent;
						border-bottom-color: transparent;
						border-right-color: transparent;
					}
				}

				.cont_R {
					flex: 1;
					background: #f8f8f8;

					.R_info {
						padding: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						vertical-align: middle;

						image {
							vertical-align: middle;
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}
					}

					.R_his {
						padding: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;

						text {
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}

					.R_spic {
						padding: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}

		.content_R {
			overflow-y: auto;
			flex: 1;

			.R_text {
				padding: 40rpx 40rpx 0 20rpx;

				.lines {
					margin-top: 30rpx;
					border-bottom: 2rpx solid #eeeeee;
				}

				text:nth-child(1) {
					display: block;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				text:nth-child(2) {
					display: block;
					border: 2rpx solid #0091ff;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #0091ff;
					padding: 5rpx;
					margin-top: 6rpx;
					width: 112rpx;
					text-align: center;
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		width: 100%;
		height: 600rpx;

		.circle {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			// background-color:#e9e9e9 ;

		}

		image {
			width: 112rpx;
			height: 112rpx;
		}

		.title {
			font-size: 28rpx;
			color: #666;
			font-weight: 400;
			margin-top: 10rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>
